<template>
  <div class="goods-pron-container">
    <!-- 返回上一页图标 -->
    <div class="return" @touchend="$router.back()">
      <van-icon name="arrow-left" color="#fff" size="18px" />
    </div>
    <!-- 图片 -->
    <van-swipe class="pron-img" :autoplay="5000" indicator-color="#f80">
      <van-swipe-item v-for="(image, index) in goods.image" :key="index">
        <img :src="image" />
      </van-swipe-item>
    </van-swipe>
    <!-- 商品信息 -->
    <div class="goods-info">
      <div class="pron-price">
        预估到手￥<span>{{ goods.price }}</span>
      </div>
      <div class="pron-title">{{ goods.title }}</div>
      <div class="pron-tags">
        <div>满5减2</div>
        <div>满100减10</div>
        <div>满1000减30</div>
        <div v-for="(item, i) in goods.tags" :key="i">{{ item }}</div>
      </div>
      <div class="pron-ranking">
        <div class="left">
          <div class="logo"><van-icon name="fire" color="#fff700" />排行榜</div>
          热卖榜.第20名
        </div>
        <div class="right">
          Top20
          <div>
            <van-icon name="arrow" color="#fff" size="12px" />
          </div>
        </div>
      </div>
      <div class="pron-quantity">销量{{ goods.quantity }}+</div>
    </div>
    <!-- 发货信息 -->
    <div class="pron-send">
      <div class="pron-arrange van-hairline--bottom">
        <div>
          <div class="icons">
            <van-icon name="logistics" size="25px" />
          </div>

          <div>
            <div>
              <span class="city">{{ goods.address }}</span
              >快递：免运费
            </div>
            <div class="text">现在下单，预计后天送达</div>
          </div>
        </div>
        <van-icon name="arrow" />
      </div>
      <div class="pron-arrange">
        <div>
          <div class="icons">
            <van-icon name="like-o" size="25px" />
          </div>

          <div>假一赔四 . 急速退款 . 七天无理由退换</div>
        </div>
        <van-icon name="arrow" />
      </div>
    </div>
    <!-- 下方商品导航 -->
    <van-goods-action class="van-hairline--top">
      <van-goods-action-icon :badge="badge" icon="cart-o" text="购物车" to="/cart" />
      <van-goods-action-icon
        v-show="!isCollect"
        icon="star-o"
        text="收藏"
        @click="goodsCollect(true)"
      />
      <van-goods-action-icon
        v-show="isCollect"
        icon="star"
        text="已收藏"
        color="#ff5000"
        @click="goodsCollect(false)"
      />
      <van-goods-action-button type="warning" @click="pronSetCount(1)" text="加入购物车" />
      <van-goods-action-button type="danger" text="立即购买" @click="handlePurchase" />
    </van-goods-action>
  </div>
</template>

<script>
import api from "@/api";
import { mapState } from "vuex";

export default {
  mounted() {
    //获取该商品id
    this.goodsId = this.$route.query.id;
    this.getGoodsData();
  },
  data() {
    return {
      goodsId: null,
      goods: {},
      isCollect: null,
    };
  },
  computed: {
    ...mapState(["numList"]),
    //购物车徽标显示
    badge() {
      const count = Object.values(this.numList).reduce((prev, cur) => prev + cur, 0);
      if (count > 99) {
        return "99+";
      }
      return count;
    },
  },
  methods: {
    //获取商品该商品详情
    async getGoodsData() {
      this.$store.commit("setLoading", true);
      const res = await api.getGoods(this.goodsId);
      this.goods = res;
      this.isCollect = res.collect || false;
    },
    //收藏商品
    async goodsCollect(bol) {
      this.$store.commit("setLoading", true);
      //判断取消/收藏
      const data = { id: +this.goodsId, collect: bol };
      this.isCollect = await api.userCollect(data);
      this.$toast({
        message: bol ? "收藏成功" : "已取消收藏",
        className: "pron-toast",
      });
    },
    //加入购物车
    pronSetCount(num) {
      this.$store.commit("localNumList", { id: this.goodsId, num });
      this.$toast({
        message: "已加入购物车",
      });
    },
    //点击立即购买
    handlePurchase() {
      this.$toast({
        message: "立即购买",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/css/GoodsPron.scss";
</style>
